<template>
  <scroll-view>
    <view class="" style="display: flex;">
      <button @click="$emit('close')" type="primary" style="width: 80%;">返回</button>
      <button @click="openEditPopup" type="warn" style="width: 80%;">修改会员</button>
    </view>
    <view class="card all-info-card">
      <!-- 头像与第一组信息 -->
      <view class="first-section">
        <image v-if="member.photo_url" :src="member.photo_url" class="avatar-img"></image>
        <image v-else src="../../static/001.png" class="avatar-img"></image>
        <view class="basic-info">
          <view class="info-row">
            <label>姓名：</label>
            <text>{{ member.name }}</text>
          </view>
          <view class="info-row">
            <label>卡号：</label>
            <text>{{ member.card_number }}</text>
          </view>
          <view class="info-row">
            <label>电话：</label>
            <text>{{ member.phone }}</text>
          </view>
          <view class="info-row">
            <label>店名：</label>
            <text>{{ member.shop_name }}</text>
          </view>
        </view>
      </view>

      <!-- 竖线分隔符 -->
      <view class="divider"></view>

      <!-- 第二组与第三组信息 -->
      <view class="second-third-section">
        <!-- 第二组信息 -->
        <view class="info-group">
          <view class="info-row">
            <label>等级：</label>
            <text>{{ member.level_name }}</text>
          </view>

          <view class="info-row">
            <label>生日：</label>
            <text>{{ member.birth_date }}</text>
          </view>
          <view class="info-row">
            <label>余额：</label>
            <text>{{ member.account_balance }}</text>
          </view>
          <view class="info-row">
            <label>性别：</label>
            <text v-if="member.gender === 'secret'">保密</text>
            <text v-else-if="member.gender === 'male'">男</text>
            <text v-else>女</text>
          </view>
        </view>

        <!-- 竖线分隔符 -->
        <view class="divider"></view>

        <!-- 第三组信息 -->
        <view class="info-group">
          <view class="info-row">
            <label>会员状态：</label>
            <text>正常</text>
          </view>
          <view class="info-row">
            <label>开卡时间：</label>
            <text>{{ member.created_at }}</text>
          </view>
          <view class="info-row">
            <label>工本费：</label>
            <text>{{ member.card_cost }}</text>
          </view>
          <view class="info-row">
            <label>状态：</label>
            <text v-if="member.status === 1">正常</text>
            <text v-else>已关闭</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 标签页 -->
    <view class="tabs">
      <button class="tab" :class="{ active: currentTab === 'consumption' }" @click="setTab('consumption')" size="mini">开方记录</button>
      <button class="tab" :class="{ active: currentTab === 'recharge' }" @click="setTab('recharge')" size="mini">充值记录</button>
      <button class="tab" :class="{ active: currentTab === 'project' }" @click="setTab('project')" size="mini">充次记录</button>
      <!-- <button class="tab" :class="{ active: currentTab === 'remaining' }" @click="setTab('remaining')" size="mini">剩余项目</button> -->
    </view>

    <!-- 各标签页内容 -->
    <view v-if="currentTab === 'consumption'" class="tab-content">
      <uni-table :border="true">
        <uni-tr>
          <uni-th>开方日期</uni-th>
          <uni-th>会员名称</uni-th>
          <uni-th>备注</uni-th>
          <uni-th>金额</uni-th>
          <uni-th>操作</uni-th>
        </uni-tr>
        <uni-tr v-for="record in prescriptionRecords" :key="record.id">
          <uni-td>{{ record.created_at }}</uni-td>
          <uni-td>{{ record.member_name }}</uni-td>
          <uni-td>{{ record.note }}</uni-td>
          <uni-td>{{ record.total_amount }}</uni-td>
          <uni-td>
            <uni-button type="default" size="mini" @click="viewPrescription(record)">查看</uni-button>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>

    <view v-if="currentTab === 'recharge'" class="tab-content">
      <uni-table :border="true">
        <uni-tr>
          <uni-th>充值日期</uni-th>
          <uni-th>金额</uni-th>
		  <uni-th>店名</uni-th>
          <uni-th>操作</uni-th>
		  
        </uni-tr>
        <uni-tr v-for="record in rechargeRecords" :key="record.id">
          <uni-td>{{ record.charge_time }}</uni-td>
		  <uni-td>{{ record.store_name }}</uni-td>
          <uni-td>{{ record.received_amount }}</uni-td>
          <uni-td>
            <uni-button type="default" size="mini" @click="viewRecharge(record)">查看</uni-button>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>

    <view v-if="currentTab === 'project'" class="tab-content">
      <uni-table :border="true">
        <uni-tr>
          <uni-th>充次日期</uni-th>
		  <uni-th>会员卡号</uni-th>
          <uni-th>项目名称</uni-th>
          <uni-th>金额</uni-th>
          <uni-th>操作</uni-th>
        </uni-tr>
        <uni-tr v-for="record in rechargeTimesRecords" :key="record.id">
		 <uni-td>{{ record.created_at }}</uni-td>
          <uni-td>{{ record.card_number }}</uni-td>
          <uni-td>{{ record.name }}</uni-td>
          <uni-td>{{ record.total_amount }}</uni-td>
          <uni-td>
            <uni-button type="default" size="mini" @click="viewRechargeTimes(record)">查看</uni-button>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>

    <view v-if="currentTab === 'remaining'" class="tab-content">
      <uni-table :border="true">
        <uni-tr>
          <uni-th>项目名称</uni-th>
          <uni-th>剩余次数</uni-th>
          <uni-th>操作</uni-th>
        </uni-tr>
        <uni-tr v-for="project in remainingProjects" :key="project.id">
          <uni-td>{{ project.project_name }}</uni-td>
          <uni-td>{{ project.remaining_times }}</uni-td>
          <uni-td>
            <uni-button type="default" size="mini" @click="viewRemainingProject(project)">查看</uni-button>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>

    <!-- 编辑会员信息弹窗 -->
    <uni-popup ref="editPopup" type="center">
      <view class="member-modal">
        <h3>编辑会员信息</h3>
        <!-- 表单输入字段 -->
        <view class="form-row">
          <label>姓名：</label>
          <input v-model="editMember.name" class="input-field" />
        </view>
        <view class="form-row">
          <label>卡号：</label>
          <input v-model="editMember.card_number" class="input-field" />
        </view>
        <view class="form-row">
          <label>电话：</label>
          <input v-model="editMember.phone" class="input-field" />
        </view>
        <view class="form-row">
          <label>店名：</label>
          <input v-model="editMember.shop_name" class="input-field" />
        </view>
        <view class="form-row">
          <label>余额：</label>
          <input v-model="editMember.account_balance" class="input-field" />
        </view>
        <view class="form-row">
          <label>会员等级：</label>
          <select v-model="editMember.level" class="input-field">
            <option value="" disabled>请选择会员等级</option>
            <option v-for="level in levels" :key="level.id" :value="level.id">{{ level.name }}</option>
          </select>
        </view>
        <view class="form-row">
          <label>生日：</label>
          <picker mode="date" v-model="editMember.birth_date">
            <view class="picker">{{ editMember.birth_date }}</view>
          </picker>
        </view>
        <view class="form-row">
          <label>性别：</label>
          <select v-model="editMember.gender" class="input-field">
            <option value="secret">保密</option>
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </view>
        <view class="form-row">
          <label>工本费：</label>
          <input v-model="editMember.card_cost" class="input-field" />
        </view>
        <view class="form-row">
          <label>状态：</label>
          <select v-model="editMember.status" class="input-field">
            <option value="1">正常</option>
            <option value="0">已关闭</option>
          </select>
        </view>
        <!-- 保存和取消按钮 -->
        <view class="button-group">
          <button class="modal-button save" @click="saveMember" size="mini">保存</button>
          <button class="modal-button cancel" @click="closeEditPopup" size="mini">取消</button>
        </view>
      </view>
    </uni-popup>
  </scroll-view>
</template>

<script>
export default {
  props: {
    memberId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      member: {},
      editMember: {},
      prescriptionRecords: [],
      rechargeRecords: [],
      rechargeTimesRecords: [],
      remainingProjects: [],
      currentTab: "consumption",
      levels: [], // 会员等级列表
      level: '', // 选中的会员等级
      userInfo: {} // 登录信息
    };
  },
  methods: {
    async fetchMemberDetails() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/get_member_details',
        method: 'GET',
        data: {
          id: this.memberId
        }
      });
      if (res.data.code === 200) {
        this.member = res.data.data;
        this.editMember = { ...this.member };
      } else {
        uni.showToast({
          title: res.data.message,
          duration: 2000,
          icon: 'none'
        });
      }
    },
    setTab(tab) {
      this.currentTab = tab;
      this.fetchRecords();
    },
    async fetchRecords() {
      if (this.currentTab === 'consumption') {
        // 获取开方记录
        const res = await this.$myRuquest({
          url: '/index/plugin.orders/getShopOrders',
          method: 'GET',
          data: { member_id: this.memberId }
        });
        if (res.data.code === 200) {
          this.prescriptionRecords = res.data.data;
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          });
        }
      } else if (this.currentTab === 'recharge') {
        // 获取充值记录
        const res = await this.$myRuquest({
          url: '/index/plugin.orders/get_records',
          method: 'GET',
          data: { member_id: this.memberId }
        });
        if (res.data.code === 200) {
          this.rechargeRecords = res.data.records;
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          });
        }
      } else if (this.currentTab === 'project') {
        // 获取充次记录
        const res = await this.$myRuquest({
          url: '/index/plugin.orders/getProjectUsage',
          method: 'GET',
          data: { card_number: this.member.card_number }
        });
        if (res.data.code === 200) {
          this.rechargeTimesRecords = res.data.records;
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          });
        }
      } else if (this.currentTab === 'remaining') {
        // 获取剩余项目
        const res = await this.$myRuquest({
          url: '/index/plugin.orders/getProjectUsage',
          method: 'GET',
          data: { card_number: this.member.card_number }
        });
        if (res.data.code === 200) {
          this.remainingProjects = res.data.data;
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          });
        }
      }
    },
    async getLevels() {
      // 获取会员等级列表
      const res = await this.$myRuquest({
        url: '/index/plugin.users/getLevels',
        method: 'POST',
        data: {
          user_id: this.userInfo.user_id
        }
      });
      if (res.data.code === 200) {
        this.levels = res.data.data;
      } else {
        uni.showToast({
          title: res.data.message,
          duration: 2000,
          icon: 'none'
        });
      }
    },
    async saveMember() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/update_member',
        method: 'POST',
        data: this.editMember
      });
      if (res.data.code === 200) {
        uni.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        });
        this.closeEditPopup();
        this.fetchMemberDetails();
      } else {
        uni.showToast({
          title: res.data.message,
          duration: 2000,
          icon: 'none'
        });
      }
    },
    openEditPopup() {
      this.$refs.editPopup.open();
    },
    closeEditPopup() {
      this.$refs.editPopup.close();
    },
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      if (token) {
        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
        this.getLevels();
      } else {
        this.userInfo = {};
        this.$router.push('/pages/login/login');
      }
    },
  },
  created() {
    this.checkLoginStatus();
    this.fetchMemberDetails();
    this.fetchRecords();
  }
};
</script>

<style>
  .basic-info {
    margin-top: 30px;
    margin: 15px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .info-row {
    display: flex;
    margin-bottom: 10px;
  }

  label {
    width: 80px;
    font-weight: bold;
    color: #666;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
  }

  .tab {
    padding: 10px 15px;
    background-color: #ddd;
    border-radius: 8px;
    cursor: pointer;
    flex: 1;
    text-align: center;
    margin: 0 5px;
  }

  .tab.active {
    background-color: #1abc9c;
    color: #fff;
  }

  .tab-content {
    margin: 15px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .record {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
  }

  /* 单一卡片的全局容器 */
  .all-info-card {
    margin-top: 10px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    display: flex;
  }

  .first-section {
    display: flex;
    align-items: center;
    width: 35%;
  }

  .avatar-img {
    width: 100px;
    height: 150px;
    border-radius: 8px;
  }

  .basic-info {
    margin-left: 15px;
  }

  .second-third-section {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
  }

  .info-group {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .divider {
    width: 2px;
    height: auto;
    background-color: #dcdcdc;
    margin: 0 15px;
  }

  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  label {
    width: 80px;
    font-weight: bold;
    color: #666;
  }

  text {
    flex: 1;
    color: #333;
  }

  .member-modal {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
  }

  .edit-member {
    margin: 15px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .input-field {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
  }

  .picker {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .modal-button {
    flex: 1;
    padding: 10px 15px;
    margin: 0 5px;
    background-color: #1abc9c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .modal-button.save:hover {
    background-color: #16a085;
  }

  .modal-button.cancel {
    background-color: #e74c3c;
  }

  .modal-button.cancel:hover {
    background-color: #c0392b;
  }

  .import-export-buttons {
    margin: 20px;
    display: flex;
    justify-content: space-around;
  }

  .control-button {
    padding: 10px 15px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .control-button:hover {
    background-color: #2980b9;
  }
</style>
